<template>
  <div class="refoundDialog">
    <nut-popup
      position="bottom"
      :style="{ height: '30%' }"
      v-model:visible="showBottom"
      lock-scroll:true
      :z-index="2002"
      :lock-scroll="true"
    >
      <div class="paddingBox">
        <div class="popTop jscenter">
          <p>请选择申请类型</p>
          <nut-image
            :src="getAssetsFile('home/closeIcon.png')"
            @click="closeDialog"
          />
        </div>
      </div>

      <template v-if="!isManager">
        <div class="popBody">
          <div
            class="selectItem jscenter"
            v-for="item in selectList"
            :key="item.id"
            @click="selectRefound(item)"
          >
            <div class="selectLeft">
              <p class="title">{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
            </div>
            <nut-image
              class="rightIcon"
              :src="getAssetsFile('home/payOrder/rightArrow.png')"
            ></nut-image>
          </div>
        </div>
      </template>

      <template v-if="isManager">
        <div class="popBody">
          <div
            class="selectItem jscenter"
            v-for="item in managerSelectList"
            :key="item.id"
            @click="selectRefound(item)"
          >
            <div class="selectLeft">
              <p class="title">{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
            </div>
            <nut-image
              class="rightIcon"
              :src="getAssetsFile('home/payOrder/rightArrow.png')"
            ></nut-image>
          </div>
        </div>
      </template>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getAssetsFile, isRes } from "@/utils/pub-use";
const props = defineProps<{ isManager?: boolean }>();
let selectList = [
  {
    id: 1, //退货
    title: "我要退款(无需退货)",
    desc: "未收到货物，或申请不退货直接退款",
  },
  {
    id: 2, //退货退款
    title: "我要退货退款",
    desc: "已收到货，申请寄回货物并退款",
  },
];

let managerSelectList = [
  {
    id: 1, //退货
    title: "仅退款",
    desc: "无需退货，库存数量不返还",
  },
  {
    id: 2, //退货退款
    title: "退货退款",
    desc: "收到货物，库存数量返还",
  },
];
let showBottom = ref<boolean>(false);
const closeDialog = () => {
  showBottom.value = false;
};
const openDialog = () => {
  showBottom.value = true;
};
const selectRefound = (item: any) => {
  emits("select", item);
};
const emits = defineEmits(["select"]);
defineExpose({ openDialog, closeDialog });
</script>

<style lang="scss" scoped>
.refoundDialog {
  :deep(.popup-bottom) {
    border-radius: 40px 40px 0px 0px;
  }
  .paddingBox {
    padding: 30px;
    padding-bottom: 130px;
    padding-top: 0px;

    .popTop {
      background: #fff;
      z-index: 99;
      border-bottom: 1px solid #eeeeee;
      position: fixed;
      left: 30px;
      right: 30px;
      height: 110px;
      p {
        font-weight: 500;
        font-size: 32px;
      }
      .nut-image {
        width: 26px;
        height: 26px;
      }
    }
  }
  .popBody {
    padding: 0 30px;
    .selectItem {
      padding: 25px 0;
      border-bottom: 1px solid #eeeeee;
      .selectLeft {
        .title {
          color: #333333;
          font-size: 32px;
        }
        .desc {
          color: #999999;
          font-size: 24px;
          margin-top: 10px;
        }
      }
      .rightIcon {
        width: 26px;
        height: 26px;
      }
    }
    .selectItem:last-child {
      border-bottom: none;
    }
  }
}
</style>
